<template>
	<view class="">
		<u-navbar :is-back="true" title="班课考勤" back-icon-color="#ffffff" :background="{backgroundColor:'#E62131'}"
			title-color="#ffffff"></u-navbar>
		<view class="heightlsit">
			<view class="tiotietlwes border_color ">
				<span style="display: flex;align-items: center;padding-left: 25%;" v-if="current == 0">
					<span style="padding-right: 5rpx;"><wly-datetime-picker type="date" :isIcons="false"
							inputStyle="background-color:#ffffff;width:300rpx" v-model="parms.openTime"
							@change="maskClick" ></wly-datetime-picker></span>
				</span>
				<span v-if="current == 1" @click="lisadsas" style="color: #010101;"><span style="padding: 10rpx;">{{minaparms.openTime}}</span> 
				<u-icon name="arrow-down-fill" color="#a7a7a7" size="30"></u-icon> </span>
				<span class="imgicons"><u-icon name="list-dot" color="#b1b1b1" size="30"
						@click="isshowmodal"></u-icon></span>
			</view>
			<view class="">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"
					active-color="#E62131"></u-tabs>
			</view>
			<view class="lsitcentes border_color fliexs space_between">
				<view class="lefttxt" v-if="current == 0">
					共{{toals}}课，共{{classHours}}课时
				</view>
				<view class="lefttxt" v-if="current == 1">
					共{{toals}}人次，共计{{classHours}}课时
				</view>
				<view class="righttext">
					<!-- <u-icon name="calendar-fill" color="#a7a7a7" size="30"></u-icon> <span>批量处理</span> -->
				</view>
			</view>
		</view>
		<view class="listcenter">
			<view class="toplist  border_color" v-for="(item,index) in tablist" :key="index">
				<view class="topcen fliexs space_between">
					<view class="titlesleft" v-if="current == 0">
						{{item.className ||''}}
						<!-- <span class="weishnagke">末上课</span> -->
					</view>
					<view class="titlesleft" v-if="current == 1">
						<view class="canghs">
							常
						</view> <span>{{item.studentName}}</span>
						<span
							class="weishnagke">{{item.isAttendance == 0?'未出勤':item.isAttendance == 1?'已出勤':item.isAttendance == 2?'缺勤':''}}</span>
					</view>
					<u-icon v-if="current == 0" @click="modalactive(index)" name="more-dot-fill" color="#a7a7a7"
						size="60"></u-icon>
				</view>
				<view class="centerlist" v-if="current == 0"
					@click="topagesList('./listDetail?id=' + item.id+'&openTime='+parms.openTime)">
					<u-icon name="account-fill" color="#a7a7a7" size="30"></u-icon> <span
						style="padding-left: 10rpx;">{{item.coachName}}</span>
				</view>
				<view class="centerlist" v-if="current == 1">
					<u-icon name="account-fill" color="#a7a7a7" size="30"></u-icon> <span
						style="padding-left: 10rpx;">{{item.classInfo.name}} {{item.coachName}}
						{{item.courseInfo.courseType ==0?'基础班':item.courseInfo.courseType ==1?'兴趣班':item.courseInfo.courseType ==2?'提高班':item.courseInfo.courseType ==3?'精英班':''}}</span>
				</view>
				<view class="btnlist fliexs space_between"
					@click="topagesList('./listDetail?id=' + item.id+'&openTime='+parms.openTime)">
					<view class="fliexs">
						<u-icon name="order" color="#a7a7a7" size="30"></u-icon>
						<span style="padding-left: 10rpx;" v-if="current == 0">
							{{item.courseInfo.courseType ==0?'基础班':item.courseInfo.courseType ==1?'兴趣班':item.courseInfo.courseType ==2?'提高班':item.courseInfo.courseType ==3?'精英班':''}}
							{{item.classStartTime}}~{{item.classEndTime}}</span>
						<span style="padding-left: 10rpx;" v-if="current == 1"> {{item.classYear}}-{{item.classDate}}
							{{item.classStartTime}}~{{item.classEndTime}} {{item.workOut.classHours}}课时</span>
					</view>
					<view v-if="current == 0">总({{item.allnum}}) 出({{item.onedance}}) 缺({{item.totwodance}})</view>
					<view class="right" v-if="current == 1 && item.isAttendance===0" style="color: #E62131;" @click.stop="outmumny(item)">
						扣费
					</view>
					<view class="right" v-if="current == 1 && item.isAttendance!=0" style="color: #E62131;" >
						已考勤
					</view>
				</view>
				<view class="listListad" v-if="actives == index">
					<view class="uls">
						<view class="lis" @click.stop="topagesList('./addreport?id=' + item.id+'&openTime='+parms.openTime)">
							写课堂报告
						</view>
						<view class="lis" @click.stop="topagesList('./endclass?item=' + JSON.stringify(item))">
							修改排课
						</view>
						<view class="lis" style="border: none;" @click.stop="removepalke(item)">
							删除排课
						</view>
						<!-- <view class="lis">
							学员调课
						</view>
						<view class="lis">
							添加插班学员
						</view>
						<view class="lis">
							添加试听学员
						</view>
						<view class="lis" style="border: none;">
							学员补课
						</view> -->
					</view>
				</view>
			</view>
		</view>



		<u-popup v-model="show" mode="right" z-index="99" :safe-area-inset-bottom="true" width="80%">
			<view class="centers">
				<view class="formsa">
					<view class="" style="padding: 0 10rpx;">
						<u-form :model="form" ref="uForm" label-width="150rpx">
							<u-form-item label="课程名称" v-if="current == 0"><u-input
									v-model="form.courseName" /></u-form-item>
							<u-form-item label="教练名称" v-if="current == 0"><u-input
									v-model="form.coachName" /></u-form-item>
							<u-form-item label="班级名称" v-if="current == 0"><u-input
									v-model="form.className" /></u-form-item>

							<u-form-item label="学员姓名" v-if="current == 1"><u-input
									v-model="form.studentName" /></u-form-item>
							<u-form-item label="是否出勤" v-if="current == 1"><u-input v-model="form.texts"
									type="select" @click="slictshow = true"  /></u-form-item>
						</u-form>
					</view>
					<view class="btnlst fliexs space_between">
						<view class="btn_left center" @click="clichs">
							清空
						</view>
						<view class="btn_left right" @click="oklistTlist">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-picker mode="time" v-model="showdate" :params="dateparams" @confirm="confirmdate" confirm-color="#E62131"></u-picker>
		<u-modal v-model="outshow" :content="content" @confirm="confirm" @cancel="cancel"
			:show-cancel-button="true"></u-modal>

		<u-action-sheet :list="actionSheetList" v-model="slictshow" @click="actionSheetCallback"></u-action-sheet>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				showdate: false,
				dateparams:{
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				slictshow: false,
				actionSheetList: [{
						text: '未上课',
						// value: 0,
					},
					{
						text: '已出勤',
						// value: 1,
					},
					{
						text: '缺勤',
						// value: 2,
					}
				],
				single: '',
				content: "是否确定扣费？",
				outshow: false,
				show: false,
				username: "",
				password: "",
				actives: null,
				users: null,
				list: [{
					name: '课程列表'
				}, {
					name: '学员明细'
				}],
				current: 0,
				form: {
					courseName: '',
					coachName: '',
					className: '',
					studentName: '',
					isAttendance: '',
					texts:"",
				},
				parms: {
					limit: 10,
					page: 1,
					openTime: "",
					courseName: '',
					coachName: '',
					className: '',
				},
				minaparms: {
					limit: 10,
					page: 1,
					openTime: "",
					studentName: '',
					isAttendance: '',
				},
				tablist: [],
				toals: 0,
				ismoads: 0,
				items: null,
				classHours:0,
			}
		},
		onLoad(options) {
			var timestamp = uni.$func.now();
			this.parms.openTime = uni.$func.datetime(timestamp, 1)
			this.minaparms.openTime = uni.$func.datetime(timestamp, 7)
			// this.heightList()
		},
		onShareAppMessage(res) {
			return {
				title: '',
				path: "/pages/index/index"
			}
		},
		onShow() {
			this.parms.page = 1
			this.tablist = [];
			this.classHours = 0
			this.workoutListAPI()

		},
		onReachBottom() {
			console.log(1111)
			if(this.current == 0){
				this.parms.page += 1
				this.workoutListAPI()
			}
			if(this.current == 1){
				this.minaparms.page += 1
				this.studentworkListApi()
			}
		},
		methods: {
			lisadsas(){
				this.showdate = true
			},
			confirmdate(e){
				this.minaparms.openTime = e.year+'-'+e.month
				this.minaparms.page = 1
				this.tablist = [];
				this.classHours = 0
				this.studentworkListApi()
			},
			clichs(){
				this.form = {
					courseName: '',
					coachName: '',
					className: '',
					studentName: '',
					isAttendance: '',
					texts:"",
				};
			},
			oklistTlist(){
				this.tablist = [];
				this.classHours = 0
				if(this.current === 0){
					this.parms.courseName = this.form.courseName
					this.parms.coachName = this.form.coachName
					this.parms.className = this.form.className
					this.workoutListAPI()
				}
				if(this.current === 1){
					this.minaparms.studentName = this.form.studentName
					this.minaparms.isAttendance = this.form.isAttendance
					this.studentworkListApi()
				}
				this.show = false
			},
			actionSheetCallback(e){
				if(this.actionSheetList[e].text == '未上课'){
					this.form.isAttendance = 0
				}
				if(this.actionSheetList[e].text == '已出勤'){
					this.form.isAttendance = 1
				}
				if(this.actionSheetList[e].text == '缺勤'){
					this.form.isAttendance = 2
				}
				this.form.texts = this.actionSheetList[e].text
			},
			heightList() {
				uni.createSelectorQuery().select('.heightlsit').boundingClientRect(function(res) {
					this.heights = res.height
				}).exec()
			},
			maskClick(e) {
				this.parms.page = 1
				this.tablist = [];
				this.classHours = 0
				this.parms.openTime = e
				this.workoutListAPI()
			},
			workoutListAPI() {
				uni.$api.common.workoutList(this.parms).then((res) => {
					uni.hideLoading()
					res.result.forEach((item) => {
						this.classHours += item.classHours
						item.allnum = item.studentWorkList.length;
						item.onedance = 0;
						item.totwodance = 0;
						item.studentWorkList.forEach((elmes) => {
							if (elmes.isAttendance == 1) {
								item.onedance += 1
							}
							if (elmes.isAttendance == 2) {
								item.totwodance += 1
							}
							// if (elmes.isAttendance == 0) {
							// 	item.totwodance += 1
							// }
						})
						this.tablist.push(item)
					})
					this.toals = res.count;
					// this.tablist = res.result
					this.clichs()
				});
			},
			studentworkListApi() {
				uni.$api.common.studentworkList(this.minaparms).then((res) => {
					res.result.forEach((item) => {
						this.classHours += item.workOut.classHours
						this.tablist.push(item)
					})
					this.toals = res.count;
					// this.tablist = res.result
					this.clichs()
				});
			},
			clcikmoave() {
				// this.actives = null
			},
			modalactive(index) {
				if (this.actives == index) {
					this.actives = null
				} else {
					this.actives = index
				}

			},
			adlasdflj() {
				// this.actives = null
			},
			isshowmodal() {
				this.show = true;
			},
			change(index) {
				this.current = index;
				this.tablist = [];
				this.classHours = 0
				if (index == 0) {
					this.parms.page = 1
					this.workoutListAPI()
				}
				if (index == 1) {
					this.minaparms.page = 1
					this.studentworkListApi()
				}

			},
			outLogin() {
				uni.clearStorage();
				uni.redirectTo({
					url: "./index"
				})
			},
			getUserInfoApi() {
				uni.$api.common.getUserInfo().then((res) => {
					this.users = res.result
				});
			},
			topagesList(url) {
				if (this.current == 1) {
					return
				}
				uni.navigateTo({
					url
				})
				this.actives = null
			},
			topaesad() {
				uni.navigateTo({
					url: "./indexlist"
				})
			},
			outmumny(item) {
				this.items = item
				this.outshow = true;
				this.ismoads = 1
				this.content = "是否确定扣费？"
			},
			confirm() {
				if (this.ismoads == 2) {
					uni.$api.common.deleteoutkList(this.items.id).then((res) => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.actives = false
						this.workoutListAPI()
					});
				}
				if (this.ismoads == 1) {
					let obj = {
						id: this.items.workId,
						studentWorkIds: [{
							id: this.items.id,
							isAttendance: 1,
						}]
					}
					uni.$api.common.editHours(obj).then((res) => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.minaparms.page = 1
						this.tablist = [];
						this.classHours = 0
						this.studentworkListApi()
					});
				}
			},
			cancel() {
				this.outshow = false;

			},
			removepalke(item) {
				this.items = item
				this.outshow = true;
				this.ismoads = 2
				this.content = "是否确定删除该排课？"
			},
		}
	}
</script>

<style lang="scss">
	.tiotietlwes {
		text-align: center;
		color: #b1b1b1;
		padding: 20rpx 0;
		position: relative;
	}

	.imgicons {
		position: absolute;
		right: 20rpx;
		bottom: 0;
		top: 0;
		display: flex;
		align-items: center;
	}

	.border_color {
		border-bottom: 1rpx solid #e1e1e1;
	}

	.lsitcentes {
		padding: 20rpx;

		.lefttxt {
			color: #b1b1b1;
		}

		.righttext {
			color: #a7a7a7;
		}
	}

	.listcenter {
		padding: 20px;

		.toplist {
			position: relative;
			padding: 20rpx 0;

			.topcen {
				.titlesleft {
					.canghs {
						display: inline-block;
						padding: 2rpx 6rpx;
						border-radius: 4rpx;
						background-color: #E62131;
						color: #ffffff;
						font-size: 24rpx;
						margin-right: 10px;
					}

					.weishnagke {
						margin-left: 10rpx;
						display: inline-block;
						padding: 5rpx 12rpx;
						border-radius: 10rpx;
						border: 1rpx solid #E62131;
						color: #E62131;
						font-size: 20rpx;
					}
				}
			}

			.centerlist {
				margin: 10rpx 0;
				color: #b1b1b1;
			}

			.btnlist {
				color: #b1b1b1;
			}

			.listListad {
				position: absolute;
				right: 100rpx;
				top: 20rpx;
				z-index: 9;
				text-align: center;
				background-color: #ffffff;
				border-radius: 5rpx;

				.uls {
					padding: 0 10rpx;

					.lis {
						padding: 30rpx 30rpx;
						border-bottom: 1rpx solid #e1e1e1;
					}
				}
			}
		}
	}

	

	.centers {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;

		.formsa {
			width: 100%;
			height: 75%;
		}
	}

	.btnlst {
		margin-top: 350rpx;

		.btn_left {
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #b1b1b1;
			border: 1rpx solid #e1e1e1;
		}

		.right {
			background-color: #E62131;
			color: #ffffff;
		}
	}
</style>